<!--
 * @Description: 表单项布局控件
 * 千万不要在template下面的第一行加注释，因为这里拖动的第一个元素
-->

<template>
  <Col v-bind="colPropsComputed">
    <template v-if="['CollapseContainer'].includes(schema.component)">
      <div
        class="grid-box"
        :class="{ active: schema.key === currentItem.key }"
        @click.stop="handleSetSelectItem(schema)"
      >
        <CollapseContainer
          :title="schema.label"
          class="grid-row"
          size="small"
          v-bind="schema.componentProps"
        >
          <draggable
            class="list-main ant-row"
            group="form-draggable"
            :component-data="{
              name: 'list',
              tag: 'div',
              type: 'transition-group',
            }"
            ghostClass="moving"
            :animation="180"
            handle=".drag-move"
            v-model="schema.children"
            @add="(e) => addItem(e, schema)"
            item-key="key"
          >
            <template #item="{ element }">
              <LayoutItem
                class="drag-move"
                :schema="element"
                :data="formConfig"
                :current-item="formConfig.currentItem || {}"
              />
            </template>
          </draggable>
        </CollapseContainer>
      </div>
    </template>
    <FormNode
      v-else
      :key="schema.key"
      :schema="schema"
      :current-item="currentItem"
      @handle-copy="$emit('handle-copy')"
      @handle-delete="$emit('handle-delete')"
    />
  </Col>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, reactive, toRefs } from 'vue';
import draggable from 'vuedraggable';
import FormNode from './FormNode.vue';
import FormNodeOperate from './FormNodeOperate.vue';
import { useFormDesignState } from '../../../hooks/useFormDesignState';
import { IVFormComponent } from '../../../typings/v-form-component';
import { Row, Col } from 'ant-design-vue';
import CollapseContainer from '@/components/Container/src/collapse/CollapseContainer.vue';
import { FormSchema } from '@/components/Form';
import { cloneDeep } from 'lodash-es';

export default defineComponent({
  name: 'LayoutItem',
  components: {
    FormNode,
    FormNodeOperate,
    CollapseContainer,
    draggable,
    Row,
    Col,
  },
  props: {
    schema: {
      type: Object as PropType<IVFormComponent>,
      required: true,
    },
    currentItem: {
      type: Object,
      required: true,
    },
  },
  emits: ['dragStart', 'handleColAdd', 'handle-copy', 'handle-delete'],
  setup(props) {
    console.log('LayoutItem', 'ddwwdwd');
    const {
      formDesignMethods: { handleSetSelectItem },
      formConfig,
    } = useFormDesignState();
    const state = reactive({});
    const colPropsComputed = computed(() => {
      const { colProps = { span: formConfig.value.baseColProps.span } } = props.schema;
      return colProps;
    });

    const list1 = computed(() => props.schema.columns);

    // 计算布局元素，水平模式下为ACol，非水平模式下为div
    const layoutTag = computed(() => {
      return formConfig.value.layout === 'horizontal' ? 'Col' : 'div';
    });
    const addItem = (e: any, schema: FormSchema) => {
      console.log('addItem', schema, e);
      const { newIndex } = e;
      schema.children[newIndex] = {
        ...cloneDeep(schema.children[newIndex]),
        itemProps: {
          hiddenLabel: true,
        },
        colProps: {
          span: 4,
        },
      };
      // schemas[newIndex] = cloneDeep(schemas[newIndex]);
    };
    return {
      ...toRefs(state),
      colPropsComputed,
      handleSetSelectItem,
      layoutTag,
      formConfig,
      list1,
      addItem,
    };
  },
});
</script>
<style lang="less">
@import url('../styles/variable.less');

.layout-width {
  width: 100%;
}

.hidden-item {
  background-color: rgb(240 191 195);
}
.grid-row {
  :deep(.p-2) {
    padding: 0 !important;
  }
}
</style>
